<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>
    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/css/style.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/public/wangEditor/dist/css/wangEditor.min.css">
    <script type="text/javascript" src="/public/js/swfobject.js"></script>
    <script type="text/javascript" src="/public/js/web_socket.js"></script>
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>
    <link href="/public/css/chat/style.css" rel="stylesheet">
</head>
<body onload="connect();">
<div class="container">
    <div class="left">
        <span class="char-members">聊天人员</span>
        <div>
            <ul id="mList">
            </ul>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <ul class="nav nav-tabs">
                <li role="presentation" class="chat-tab active" data-tab="all"><a href="#">全体</a></li>
                <li role="presentation" class="chat-tab" data-tab="sao"><a href="#">骚对话</a></li>
                <li role="presentation" class="chat-tab" data-tab="girl"><a href="#">妹子群</a></li>
                <li role="presentation" class="chat-tab" data-tab="calm"><a href="#">淡定点</a></li>
            </ul>
        </div>
        <div class="right-chat">
            <div class="chat-tab chat-tab-all bubbleDiv active" id="chat-tab-all"></div>
            <div class="chat-tab chat-tab-sao bubbleDiv hide" id="chat-tab-sao"></div>
            <div class="chat-tab chat-tab-girl bubbleDiv hide" id="chat-tab-girl"></div>
            <div class="chat-tab chat-tab-calm bubbleDiv hide" id="chat-tab-calm"></div>
        </div>
        <div class="right-bottom">
            <div id="editor-trigger"></div>
        </div>
        <button class="btn btn-danger btn-sm push-chat">发送</button>
    </div>
</div>
</body>
<script type="text/javascript" src="/public/wangEditor/dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/public/wangEditor/dist/js/wangEditor.js"></script>
<script type="text/javascript">
    if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
    // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
    WEB_SOCKET_SWF_LOCATION = "/public/swf/WebSocketMain.swf";
    // 开启flash的websocket debug
    WEB_SOCKET_DEBUG = true;
    var ws, name, client_list={},client_id;
    window.room_id = '<?=$room_id?>';
    // 连接服务端
    function connect() {
        // 创建websocket
        ws = new WebSocket("ws://"+document.domain+":8282");
        // 当socket连接打开时，输入用户名
        ws.onopen = onopen;
        // 当有消息时根据消息类型显示不同信息
        ws.onmessage = onmessage;
        ws.onclose = function() {
            console.log("连接关闭，定时重连");
            connect();
        };
        ws.onerror = function() {
            console.log("出现错误");
        };
    }

    // 连接建立时发送登录信息
    function onopen()
    {

    }

    // 服务端发来消息时
    function onmessage(e)
    {

        var _data = eval("("+e.data+")");
        var _acceptVar = "chat-tab-"+_data['roomId'];
        console.log(_data);
        switch (_data['type']){
            case 'init' : // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                client_id = _data.client_id;
                $.post('<?=$bindUid?>', {client_id: _data.client_id,room_id:window.room_id,room_list:'<?=$roomList?>'}, function(resData){
                    var res = eval(resData);
                    if(res.flag != 1){
//                            window.location.href = "www.baidu.com";
                        alert("神经病");
                    }else{
                        ws.send('{"type":"connect","room_id":"'+window.room_id+'","name":"'+res.name+'","token":"<?=$token?>"}');
                    }
                }, 'json');
                break;
            case 'ping' : ws.send('{"type":"pong"}');
                break;
            case 'login' :
                var _login = '<div class="msgBox"><p class="loginIn">'+_data['username']+' 进入了房间</p></div>';
                $("."+_acceptVar).append(_login);
                break;
            case 'say'   :
                var _msg = '';
                if(_data['say_type'] == 1){ //自己发言
                    _msg += '<div class="msgBox">' +
                        '<div class="rightTitle"><span>'+_data['username']+'</span></div>' +
                        '<div class="bubbleItem"><span class="bubble rightBubble">'+_data['chat']+'<span class="bottomLevel"></span>' +
                        '<span class="topLevel"></span></span></div></div>';
                }else{ //接收信息
                    _msg += '<div class="msgBox">' +
                        '<div class="leftTitle"><span>'+_data['username']+'</span></div>' +
                        '<div class="bubbleItem"><span class="bubble leftBubble">'+_data['chat']+'<span class="bottomLevel"></span>' +
                        '<span class="topLevel"></span></span></div></div>';
                }
                if(_data['chat_time'] != 0){
                    var _time = '<div class="msgBox"><p class="loginOut">'+_data['chat_time']+'</p></div>';
                    $("."+_acceptVar).append(_time);
                }
                $("."+_acceptVar).append(_msg);
                var div = document.getElementById(_acceptVar);
                div.scrollTop = div.scrollHeight;
                break;
            case 'logout'   :
                var _logout = '<div class="msgBox"><p class="loginOut">'+_data['username']+' 离开了房间</p></div>';
                $("."+_acceptVar).append(_logout);
                break;
            case 'connect' : break;
            case 'fedback' : break;
            case 'memberList' :
                if(_data['list'] !== undefined){
                    console.log(_data['list']);
                    $("#mList").empty();
                    $(_data['list']).each(function (index,item) {
                        $("#mList").append('<li>'+item+'</li>');
                    })
                }
                break;
            default :
                var _error = '<div class="msgBox"><p class="loginOut">系统异常</p></div>';
                $("."+_acceptVar).append(_error);
        }
    }

    // 输入姓名
    function show_prompt(){
        name = prompt('输入你的名字：', '');
        if(!name || name=='null'){
            name = '游客';
        }
    }

    $(function () {
        $(".push-chat").on('click',function () {
            var _chat = editor.$txt.html();
            if(_chat == ''){
                alert("请输入内容");
                $("input[name='chat']").focus();
            }else{
                var _time = Date.parse(new Date());
                $.post("<?=$sayUrl?>",{"type":"say","chat":_chat,"room_id":window.room_id,"client_id":client_id,"chat_time" : _time},function (res) {
                    var resD = JSON.parse(res);
                    if(resD['flag'] !=1){
                        var _logout = '<div class="msgBox"><p class="loginOut">发言失败，稍后再试</p></div>';
                        $(".bubbleDiv").append(_logout);
                    }
                });
                $("#editor-trigger").text("");
                $("#editor-trigger").focus();
            }
        })
    })
</script>
<script type="text/javascript">
    // 阻止输出log
     wangEditor.config.printLog = false;

    var editor = new wangEditor('editor-trigger');
    editor.config.menus = [
        'emotion',
        'img',
    ];
    // 上传图片
    editor.config.uploadImgUrl = '/upload';
    editor.config.pasteText = false;
    // 隐藏网络图片
     editor.config.hideLinkImg = true;
    // 表情显示项
//    editor.config.emotionsShow = 'value';
    editor.config.emotions = {
        "AA" : {
            title : '<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif" width="20px" height="20px" title="经典表情"',
            data  : [
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
                    value : "[草泥马]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
                    value : "[呵呵]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
                    value : "[嘻嘻]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
                    value : "[哈哈]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
                    value : "[可爱]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
                    value : "[可怜]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
                    value : "[挖鼻屎]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
                    value : "[吃惊]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
                    value : "[害羞]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
                    value : "[挤眼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
                    value : "[闭嘴]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
                    value : "[鄙视]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
                    value : "[爱你]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
                    value : "[泪]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
                    value : "[偷笑]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
                    value : "[亲亲]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
                    value : "[生病]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
                    value : "[太开心]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
                    value : "[懒得理你]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
                    value : "[右哼哼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
                    value : "[左哼哼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
                    value : "[嘘]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
                    value : "[衰]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
                    value : "[委屈]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
                    value : "[吐]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
                    value : "[打哈欠]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
                    value : "[抱抱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
                    value : "[怒]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
                    value : "[疑问]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
                    value : "[馋嘴]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
                    value : "[拜拜]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
                    value : "[思考]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
                    value : "[汗]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
                    value : "[困]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
                    value : "[睡觉]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
                    value : "[钱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
                    value : "[失望]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
                    value : "[酷]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
                    value : "[花心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
                    value : "[哼]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
                    value : "[鼓掌]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
                    value : "[晕]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
                    value : "[悲伤]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
                    value : "[抓狂]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
                    value : "[黑线]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
                    value : "[阴险]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
                    value : "[怒骂]"
                },{
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
                    value : "[心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
                    value : "[伤心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
                    value : "[猪头]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
                    value : "[ok]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
                    value : "[耶]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
                    value : "[good]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
                    value : "[不要]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
                    value : "[赞]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
                    value : "[来]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
                    value : "[弱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
                    value : "[蜡烛]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
                    value : "[蛋糕]"
                },{
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
                    value : "[囧]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
                    value : "[互粉]"
                }
            ]
        },
        "BB" : {
            title : '<img src="http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif" width="20px" height="20px" title="经典表情"',
            data  :  [
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c6b3e0b735cfe7eb8af9c4f9fab643de.gif",
                    value : "[眨眼睛]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c435c5726f7dd0609a2f203a39ae51fe.gif",
                    value : "[吻一个]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/9e8d4a9998605b6885adef2a4a1c6d77.gif",
                    value : "[吃午餐]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/d150c575b9f39820e4cf3125d5c00069.gif",
                    value : "[发音练习]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/a934ab6c5c9eb4f2b8eb05019816db8c.gif",
                    value : "[跌倒]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c47afe3ed1d340017d4efd0e94307e64.gif",
                    value : "[么么]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/a0f5b7cfce78a74d551f7b4628476573.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[一脚踢飞]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/31e4bd5d1612a5e2a3278d33beafed3a.gif",
                    value : "[路过]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/90d43c0912e46ea66637f525f0ed6da6.gif",
                    value : "[泪流满面]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/821b8ac4670b67ec1f334206d38c161d.gif",
                    value : "[反复路过]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/605e97395c4c7a36cc0cad3274e0be6f.gif",
                    value : "[被囧到了]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/319dcef4a7bac17599bf70e9866a3fd5.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[无聊]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/3d8496aed1c689c72b436b569ee24de1.gif",
                    value : "[顶呱呱]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e073d7d5955d57c30dc6d0d37210e470.gif",
                    value : "[鼓掌]"
                }
            ]
        }
    }
    // 跨域上传
     editor.config.uploadImgUrl = 'http://ab.jdhui.com/admin/site/upload';
    // onchange 事件
    editor.onchange = function () {
//        console.log(this.$txt.html());
    };
    editor.create();
    $(function () {
        $("#editor-trigger").focus();
        $(".chat-tab").on("click",function () {
            var _tab = $(this).data("tab");
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            $(".right-chat").children(".chat-tab").siblings().removeClass("active");
            $(".right-chat").children(".chat-tab").siblings().addClass("hide");
            $(".right-chat").children(".chat-tab-"+_tab).removeClass("hide");
            $(".right-chat").children(".chat-tab-"+_tab).addClass("active");
            window.room_id =  _tab ; //设置当前的房间号
            $.post("/chat2/record-room",{room:_tab},function (res) {
                var _res = JSON.parse(res);
                if(_res.flag != 1){
                    window.location.href = "/site/index";
                }
//                console.log(res);
            });
        });
    })
</script>
</html>

